<template>
	<view class="examine">
		<template v-if="!noSubject">
			<view v-if="dataFlag" class="content">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action text-black">
						<text>{{ typeStr[currentType] }}</text>
					</view>
					<view class="action"><button class="cu-btn bg-blue shadow" @tap="SubmitExamine">审核通过</button></view>
				</view>
				<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" style="flex: 1;">
					<swiper-item v-for="(subject, index) in subjectList" :key="index">
						<!-- 根据subjectIndex题目索引显示题目 -->
						<view v-if="index == subjectIndex">
							<view class="cu-bar bg-white solid-bottom">
								<view class="action text-black">
									<text class="cuIcon-title text-blue"></text>
									{{ subject.title }}
								</view>
							</view>
							<!-- 根据数据中的类型显示不同组件 -->
							<view>
								<radio-group class="block" v-if="subject.type === '1' || subject.type === '2'">
									<view class="cu-form-group" v-for="(option, index) in subject.optionList" :key="index">
										<radio :value="option.id"></radio>
										<view class="title text-black">{{ option.id }}.{{ option.content }}</view>
									</view>
								</radio-group>

								<checkbox-group class="block" v-else-if="subject.type === '3'">
									<view class="cu-form-group" v-for="(option, index) in subject.optionList" v-bind:key="index">
										<checkbox :value="option.id"></checkbox>
										<view class="title  text-black">{{ option.id }}.{{ option.content }}</view>
									</view>
								</checkbox-group>

								<view v-else-if="subject.type === '4'">
									<view class="cu-form-group solid-bottom">
										<view class="title  text-black">答：</view>
										<input placeholder="文本输入框" name="input" />
									</view>
								</view>

								<view v-else-if="subject.type === '5'">
									<view class="cu-bar cu-bar-title bg-white"><view class="action  text-black">答：</view></view>
									<view class="cu-form-group solid"><textarea maxlength="-1"></textarea></view>
								</view>
							</view>
							<!-- 控制是否显示正确答案 -->
							<view class="margin-top solid-top">
								<view class="cu-bar">
									<view class="action  text-grey">
										<text>正确答案：</text>
										<text class="solid-bottom  padding-left text-blue">{{ subject.answer }}</text>
									</view>
								</view>
								<view class="cu-bar cu-bar-title">
									<view class="action  text-grey"><text>解析：</text></view>
								</view>
								<view class="text-content padding  text-grey">{{ subject.explain }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view v-else class="bg-white flex solid-bottom padding align-center" style="height: 100%;">
				<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
			</view>
		</template>

		<view v-else class="title  text-black noSubject" >无题可审核</view>
	</view>
</template>

<script>
import index from './index.js';
export default index;
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
